<template>
  <div class="home-container">
    <navbar :showHeaderSidebar="false" :showHeaderIcon="true" />

    <img class="home-banner" src="../assets/images/home/banner.png" alt="" />

    <div class="home-list">
      <div class="home-row">
        <div
          class="home-item xmgl"
          v-if="this.$auth.hasPermi('header:project')"
          @click="toXmgl"
        >
          <div class="item-title">项目管理</div>
          <div class="item-subtitle">掌控项目全生命周期进度</div>
          <div class="item-msg">
            支持项目概览、扫描/评阅状态实时跟踪、成绩编辑与查询。进度可视化、全流程管控、高效追溯
          </div>
        </div>
        <div
          class="home-item jc"
          v-if="this.$auth.hasPermi('header:basic')"
          @click="toJcgl"
        >
          <div class="item-title">基础信息管理</div>
          <div class="item-subtitle">维护班级师生等基础数据</div>
          <div class="item-msg">
            确保数据准确性与规范性。数据基石、精准规范、统一管理
          </div>
        </div>
        <div
          class="home-item lk"
          v-if="this.$auth.hasPermi('header:lksb')"
          @click="toLksb"
        >
          <div class="item-title">联考上报</div>
          <div class="item-subtitle">规范联考数据采集与报送流程</div>
          <div class="item-msg">
            自动校验数据完整性，并生成师生账户保障信息高效传达。流程标准化、数据校验、账户自动化、信息畅通
          </div>
        </div>
        <div
          class="home-item py"
          v-if="this.$auth.hasPermi('header:grading')"
          @click="task"
        >
          <div class="item-title">试题评阅</div>
          <div class="item-subtitle">实现试卷高效、安全的在线评阅</div>
          <div class="item-msg">
            支持任务按需分配，确保成绩评定过程公平公正。高效评阅、任务分配、在线协作、公平公正
          </div>
        </div>
        <div
          class="home-item cj"
          v-if="this.$auth.hasPermi('header:cjfx')"
          @click="toCjgl"
        >
          <div class="item-title">成绩分析</div>
          <div class="item-subtitle">多维度成绩分析与管理</div>
          <div class="item-msg">
            支持查询统计，生成报表趋势图，精准定位学情差异
          </div>
        </div>
        <div class="home-item xz" @click="$router.push('/xzzx')">
          <div class="item-title">下载中心</div>
          <div class="item-subtitle">一站式获取联考所需资源</div>
          <div class="item-msg">
            提供客户端、小程序及第三方扫描仪驱动文件，保障扫描环节顺畅。
            资源聚合、便捷获取、扫描支持
          </div>
        </div>
        <div class="home-item hidden"></div>
        <div class="home-item hidden"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Navbar } from "@/layout/components";
export default {
  components: {
    Navbar,
  },
  name: "Index",
  data() {
    return {};
  },
  methods: {
    toXmgl() {
      this.$router.push("/xmgl");
    },
    toJcgl() {
      let jcLink = this.$store.state.permission.headerSidebar.filter((item) => {
        return item.name == "基础管理";
      })[0].link;
      this.$router.push(jcLink);
    },
    toCjgl() {
      const roles = this.$store.getters && this.$store.getters.roles;
      let isAdmin = roles.some((v) => {
        return "admin" === v;
      });
      if (!isAdmin) {
        this.$router.push("/cjfxxm");
      } else {
        this.$modal.alert("请登录校内角色查看本校成绩");
      }
    },
    toLksb() {
      this.$router.push("/lksbxm");
    },
    task() {
      this.$router.push("/exam");
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  width: 100vw;
  height: 100vh;
  overflow: auto;

  .home-banner {
    width: 1200px;
    height: 160px;
    display: block;
    margin: 0 auto;
    margin-top: 24px;
  }

  .home-list {
    width: 1200px;
    margin: 0 auto;
    margin-top: 44px;

    .home-row {
      display: flex;
      flex-wrap: wrap;

      .home-item {
        width: 282px;
        height: 250px;
        box-shadow: 0 4px 10px 0 #5572921a;
        background-size: 100% 100%;
        padding: 0 24px;
        box-sizing: border-box;
        cursor: pointer;
        transition: transform linear 0.1s;
        margin-bottom: 24px;
        margin-right: 24px;

        &:nth-child(4n) {
          margin-right: 0;
        }

        .item-title {
          padding-left: 68px;
          padding-top: 45px;
          color: #333333;
          font-size: 18px;
          line-height: 18px;
          font-weight: bold;
        }

        .item-subtitle {
          margin-top: 35px;
          font-size: 16px;
          color: #5b6371;
          line-height: 16px;
          padding-top: 24px;
          border-top: 1px solid #eff1f4;
          font-weight: bold;
        }

        .item-msg {
          margin-top: 14px;
          color: #8e96a4;
          font-size: 14px;
          line-height: 22px;
        }

        &:hover {
          .item-title,
          .item-subtitle,
          .item-msg {
            color: #1a48db;
          }
          border: 1px solid #1a48db;

          transform: translate(-5px, -5px);
          box-shadow: 0 8px 10px 0 #5572921a;
        }

        &.hidden {
          visibility: hidden;
        }

        &.xmgl {
          background-image: url(../assets/images/home/xm.png);
        }

        &.lk {
          background-image: url(../assets/images/home/lk.png);
        }

        &.py {
          background-image: url(../assets/images/home/py.png);
        }

        &.cj {
          background-image: url(../assets/images/home/cj.png);
        }

        &.jc {
          background-image: url(../assets/images/home/jc.png);
        }

        &.xz {
          background-image: url(../assets/images/home/xz.png);
        }
      }
    }
  }
}
</style>

